<template>
  <div class="management-page">
    <slogan
      v-for="item in Object.keys(info)"
      :key="item"
      class="management-row"
      :itemKey="item"
      :itemMap="infoMap[item]"
      :itemInfo="info[item]"
      :pass="pass"
      @handleBeforeUpload="handleBeforeUpload"
    >
    </slogan>
    <Row justify="center">
      <Col>
        <Button type="primary" @click="save" :loading="loading">确定</Button>
      </Col>
    </Row>
  </div>
</template>

<script>
import slogan from "./components/slogan";
export default {
  components: { slogan },
  data() {
    return {
      info: {
        //中粗还原
        mediumReduce: { videoName: "", slogan: "", file: "" }, //视频名字、文件和标语
        //中粗碳化
        mediumCarbon: { videoName: "", slogan: "", file: "" }, 
        //超细还原
        slimReduce: { videoName: "", slogan: "", file: "" }, 
        //超细碳化
        slimCarbon: { videoName: "", slogan: "", file: "" }, 
      },
      infoMap: {
        //中粗粉还原工段
        mediumReduce: {
          title: "中粗粉还原工段",
          sloganTitle: "标语",
          videoTitle: "视频",
        },
        //中粗粉碳化工段
        mediumCarbon: {
          title: "中粗粉碳化工段",
          sloganTitle: "标语",
          videoTitle: "视频",
        },
        //超细粉还原工段
        slimReduce: {
          title: "超细粉还原工段",
          sloganTitle: "标语",
          videoTitle: "视频",
        },
        //超细碳化
        slimCarbon: {
          title: "超细粉碳化工段",
          sloganTitle: "标语",
          videoTitle: "视频",
        },
      },
      loading: false,
      pass: {
        isError:false
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$api.Custom.videoSearch().then((res) => {
        if (!res) return;
        Object.keys(this.info).map((key) => {
          if(!res[key])return;
          let { videoName, slogan } = res[key];
          this.info[key] = { ...this.info[key], videoName, slogan };
        });
      });
    },
    handleBeforeUpload(fileInfo, itemKey) {
      let { videoName, file } = { videoName: fileInfo.name, file: fileInfo };
      this.info[itemKey] = { ...this.info[itemKey], videoName, file };
    },
    save() {
      if(this.pass.isError){
        this.$Message.error('验证未通过！');
        return;
      }
      const formData = new FormData();
      for (let key in this.info) {
        if (this.info[key].videoName.trim() === "") {
          //1、传给后台videoName字段为空, 两种情况：①未添加视频 ②删除已存在视频, 需要把file字段去掉并传个后台
          //所传字段{`${key}_videoName`: "", `${key}_slogan`: "1加油加油"}
          this.info[key].file = "";
        }else{
          //2、传给后台videoName字段不为空, 两种情况：①file字段为空, 为修改已存在视频名字 ②且file字段有值, 则为替换已存在视频
          //情况一所传字段{`${key}_videoName`: "a.mp4", `${key}_slogan`: "1加油加油"}
          //情况二所传字段{`${key}_videoName`: "a.mp4", `${key}_slogan`: "1加油加油",`${key}_file`:binary}
           this.info[key].file && formData.append(`${key}_file`, this.info[key].file);
        }
        formData.append(`${key}_slogan`, this.info[key].slogan);
        formData.append(`${key}_videoName`, this.info[key].videoName);
      }
      this.loading = true;
      this.$api.Custom.videoUpload(formData)
        .then(() => {})
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style scoped lang="scss">
.management-page {
  padding: 0 20px;
  max-height: calc(100vh - 130px);
  overflow: auto;
  .management-row {
    width: 900px;
    margin: 0 auto 20px;
  }
}
</style>
